<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <!DOCTYPE html>
    <html>

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        </style>
    </head>
    <link rel="stylesheet" href="./style.css/land.css">

    <body>
        <!-- herder -->
        <div class="header">
            <div class="left">
                <p><a href="#">官网</a></p>
                <p><a href="#">ColorOS</a></p>
                <p><a href="#">云服务</a></p>
            </div>
            <div class="right">
                <p><a href="#">帮助中心</a></p>
                <p><a href="#">简体中文</a></p>
                <span></span>
            </div>
        </div>

        <!-- title -->
        <div class="top">
            <h2>OPPO</h2>
            <P>登陆欢太账号享受更多的服务</P>
        </div>
        <!-- main -->
        <div class="box">
            <h1>账号登陆</h1>
            <div class="land">
                <p class="message" style="cursor:pointer">短信验证码登陆</p>
                <p class="password" style="cursor:pointer">密码登陆</p>
            </div>
            <div class="z1">
                <input type="text" id="phone" placeholder="请输入手机号码">
                <input type="text" id="code" placeholder="请输入验证码">
                <input style="cursor:pointer;background-color: aqua;" type="button" id="btn" value="获取验证码">
                <button id="d1">登陆</button>
            </div>
            <div class="z2">
                <input type="text" id="phone1" placeholder="请输入用户名">
                <input type="password" id="code2" placeholder="请输入密码">
                <!-- <p>忘记密码</p> -->
                <button id="d2">登陆</button>
            </div>
            <div class="tips">
                <p class="left">隐私政策</p>
                <p class="register"><a href="./register.html">注册账号</a></p>
            </div>
        </div>
        <!-- bottom -->
        <p class="bottom">&reg;2005- 2022广东欢太 版权所有 粤ICP备14056724 号-2 联系方式: 4001-999-666
        </p>
    </body>
    <script>
        const d1 = document.querySelector("#d1")
        const d2 = document.querySelector("#d2")
        const btn = document.querySelector("#btn")
        const phone = document.querySelector("#phone")
        const phone1 = document.querySelector("#phone1")


        const message = document.querySelector(".message");
        const password = document.querySelector(".password");
        const z1 = document.querySelector(".z1");
        const z2 = document.querySelector(".z2");
        const code = document.querySelector("#code");
        const code2 = document.querySelector("#code2");

        password.onclick = function () {
            z1.style.display = "none";
            z2.style.display = "block";
            password.style.cssText = "color:#1e0000";
            message.style.cssText = "color:#8f8d9b";
        }
        message.onclick = function () {
            z1.style.display = "block";
            z2.style.display = "none";
            password.style.cssText = "color:#8f8d9b";
            message.style.cssText = "color:#1e0000";
        }
        //   手机验证码登录请求
        var v = 0;
        btn.onclick = function () {
            // alert(11)
            v = rand(10, 50)
            alert(v)
            btn.style.backgroundColor = "#aaa";


        }
        d1.onclick = function () {
            if (code.value != v) {
                alert("验证码不正确")
                return
            }
            ajax({
                type: "get",
                url: "http://localhost:3000/logins",
                data: {
                    tel: phone.value
                },
                success: res => {
                    const d = new Date();
                    d.setDate(d.getDate() + 1);
                    var user = JSON.parse(res).age;
                    var Code = JSON.parse(res).code;
                    setCookie("users", `${user}`, {
                        expires: 3,
                    });
                    console.log(res)
                    if (Code == 1) {
                        location.href = "http://localhost:3000/index.html";
                    } else {
                        alert("用户名密码不正确")
                    }
                },
                error: code => {
                    console.log("error", code);
                },
            })
        }

        d2.onclick = function () {
            ajax({
                type: "get",
                url: "http://localhost:3000/login",
                data: {
                    username: phone1.value,
                    password: code2.value,
                },
                success: res => {
                    const d = new Date();
                    d.setDate(d.getDate() + 1);
                    var user = JSON.parse(res).age;
                    var Code = JSON.parse(res).code;
                    setCookie("users", `${user}`, {
                        expires: 3,
                    });
                    console.log(res)
                    if (Code == 1) {
                        location.href = "http://localhost:3000/index.html";
                    } else {
                        alert("用户名密码不正确")
                    }
                },
                error: code => {
                    console.log("error", code);
                },
            })
        }
        function ajax(ops = {}) {
            let { type = "get", success, error, url, data = {}, timeout = 100 } = ops;
            let str = "";
            for (let i in data) {
                str += `${i}=${data[i]}&`;
            }
            url = type === "get" ? url + "?" + str.slice(0, -1) : url;
            const xhr = new XMLHttpRequest();
            xhr.timeout = timeout;
            xhr.open(type, url, true);
            xhr.onload = function () {
                if (xhr.status === 200) {
                    if (success) success(xhr.responseText);
                } else {
                    if (error) error(xhr.status);
                }
            }
            xhr.ontimeout = function () {
                if (error) error("timeout");
                xhr.abort();
            }
            if (type === "post") {
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhr.send(str.slice(0, -1));
            } else {
                xhr.send();
            }
        }
        function setCookie(key, val, ops = {}) {
            const p = ops.path ? `;path=` + ops.path : "";
            let a = "";
            if (ops.expires) {
                const d = new Date();
                d.setDate(d.getDate() + ops.expires);
                a = `;expires=` + d
            }
            document.cookie = `${key}=${val}${p}${a}`;
        }
        function rand(min, max) {
            return Math.floor(Math.random() * (max - min)) + min;
        }
    </script>

    </html>

</html>